<template>
  <div :class="{ hidden: !selfShow }" id="bg">
    <div
      id="mg"
      style="
        width: 550px;
        padding-bottom: 40px;
        margin: 180px auto;
        background: #f3f4f6;
        border-radius: 10px;
        padding-top: 30px;
      "
    >
      <div class="top">
        <h2>支付确认</h2>
        <hr style="width: 500px; margin-left: 25px; margin-top: 25px" />
      </div>
      <div class="main" style="margin-top: 15px">
        <span style="margin-left: 70px; letter-spacing: 2px"
          >您好，您的订单已经生成，是否立即支付订单。</span
        >
        <div style="margin: 15px 98px">
          <span>支付金额</span>
          <span style="margin-left: 60px; color: red">￥ {{ payTotal }}</span>
        </div>
        <div style="margin: 15px 98px">
          <span>账户金额</span>
          <span style="margin-left: 60px; color: red">￥ {{ moneyTotal }}</span>
        </div>
        <div>
          <button
            @click="close"
            class="btn6"
            style="margin-top: 15px; margin-left: 98px"
          >
            取消
          </button>
          <button
            class="btn6"
            :disabled="blo"
            style="margin-left: 100px"
            @click="sendMoney"
          >
            确认支付
          </button>
        </div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden="tips">
      <img :src="resultIcon" />
      <span>{{ msg }}</span>
    </div>
  </div>
</template>

<script>
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";
import encryption from "../../common/encryption";
let pressId;
let userId;

export default {
  name: "paySlot",
  props: ["payTotal", "myOrderNo"],
  data() {
    return {
      selfShow: false,
      myTotal: 0,
      resultIcon: "../assets/images/icon_error.png",
      msg: "",
      tips: true,
      moneyTotal: 0,
      blo: false,
    };
  },
  created() {
    pressId = this.$route.query.pressId;
    userId = this.$route.query.userId;
  },
  mounted() {
    /**
     * 打开支付弹窗，并获取账户余额
     */
    console.log(userId);
    let that = this;
    bus.$on("showPayDetail", function () {
      that.selfShow = true;
      ajax.get({
        url: api.Info.routeName + api.Info.children.account + userId,
        success(res) {
          that.messageData = JSON.parse(encryption.decryptionMxr(res));
          that.moneyTotal = that.messageData.userMoney;
        },
      });
    });
  },
  methods: {
    /**
     * 打开支付弹窗
     */
    close() {
      this.selfShow = false;
    },

    /**
     * 订单支付
     */
    sendMoney() {
      let that = this;
      let json = {
        orderNo: this.myOrderNo,
        userId: userId,
      };
      ajax.post({
        url: api.resourceDetail.routeName + api.resourceDetail.children.pay,
        data: json,
        success: function () {
          that.msg = "支付成功";
          that.$message({
            message: "支付成功",
            type: "success",
          });
          that.resultIcon = require("../../assets/images/ico_success.png");
          that.tips = false;
          setTimeout(function () {
            that.tips = true;
          }, 1500);
          that.close();
          that.$emit("listenChild");
        },
        fail(res) {
          if (res.ErrCode == 300011) {
            that.blo = true;
            setTimeout(() => {
              that.blo = false;
            }, 3000);
            that.msg = "支付失败，当前余额不足，请尽快前往充值！";
            that.resultIcon = require("../../assets/images/icon_error.png");
            that.tips = false;
            setTimeout(function () {
              that.tips = true;
            }, 1500);
          } else if (res.ErrCode == 300001) {
            that.msg = "数据不存在";
            that.resultIcon = require("../../assets/images/icon_error.png");
            that.tips = false;
            setTimeout(function () {
              that.tips = true;
            }, 1500);
          } else {
            that.msg = "服务端异常";
            that.resultIcon = require("../../assets/images/icon_error.png");
            that.tips = false;
            setTimeout(function () {
              that.tips = true;
            }, 1500);
          }
        },
      });
      // this.$emit("listenChild")
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 24px;
  margin-left: 210px;
  color: black;
  letter-spacing: 3px;
}

.hidden {
  display: none;
}

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 999;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 2px;
}
.btn6 {
  width: 120px;
  height: 30px;
  border: 1px solid black;
  background: white;
  border-radius: 8px;
}
.tips {
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: fixed;
  top: 0;
  left: 40%;
  width: auto;
  height: 65px;
  z-index: 99;
}

.tips img {
  width: 30px;
  height: 30px;
  position: relative;
  margin-top: 18px;
  margin-left: 66px;
}

.tips span {
  font-size: 15px;
  color: #3c3c3c;
  letter-spacing: -0.05px;
  line-height: 16px;
  display: inline-block;
  position: relative;
  top: -8px;
  margin-left: 13px;
  padding-right: 66px;
}
.btn6:hover {
  cursor: pointer;
}
</style>
